import $ from 'jquery'
import 'popper.js'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
import lyf from './images/lyf.webp'
import $http from "./http.js";

$(function () {
  $http({
    url: 'https://gank.io/api/v2/banners'
  }).then(res => {
    const { data } = res
    const list = data.map(({ title, image }) => ({title, image}))
    list.forEach((item, index) => {
      const { image, title } = item
      $(`<div class="carousel-item ${index === 0 ? 'active' : ''}">
        <img src="${image}" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>${title}</h5>
        </div>
      </div>`).appendTo('.carousel-inner')
    })
  }).catch(e => {
    console.log(e)
  })

  const randomGirl = function () {
    $http({
      url: `https://gank.io/api/v2/random/category/Girl/type/Girl/count/1`,
    }).then(res => {
      const { desc, images: imgSrc } = res.data[0]
      $('.my-card .card-img-top').attr('src', imgSrc[0])
      $('.my-card .card-body p').html(desc)
    })
  }

  randomGirl()
  $('.my-card .card-body .btn').on('click', randomGirl)

  let page = 1
  let count = 20
  let type = 'All'
  let hasNextPage = true
  // let page_size = Infinity

  const getList = ({ count = 20, page = 1, type = 'All' } = {}) => {
    $('.loading').addClass('show')
    $http({
      url: `https://gank.io/api/v2/data/category/All/type/${type}/page/${page}/count/${count}`,
    })
      .then(res => {
        const { data } = res
        if (data.length < count) {
          hasNextPage = false
        }
        data.forEach(function ({ images: imgSrc, desc, _id, title }) {
          $(`<div class="col-xl-3 col-lg-4 col-md-6 col-12">
            <div class="card" style="width: 100%;">
              <img src="${imgSrc[0].startsWith('http') ? imgSrc[0] : lyf}" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">${title}</h5>
                <p>${desc}</p>
                <a href="article.html?id=${_id}" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>`).appendTo('.my-list')
        })
      })
      .catch()
      .finally(() => {
        $('.loading').removeClass('show')
      })
  }


  getList({
    page,
    type,
    count
  })

  $(document).on('scroll', function () {
    let st = $('html').scrollTop()
    let ah = $(document).height()
    if(document.documentElement.clientHeight + st === ah) {
      page += 1
      if (hasNextPage) {
        getList({
          page,
          type,
          count
        })
      } else {
        console.log('没有下一页了')
        $('.has-next-page h1').html('我是有底线的')
      }
    }
  })

  $('.my-type').on('click', '.nav-link', function (event) {
    event.preventDefault()

    $(this).addClass('active')
      .parent().siblings().children().removeClass('active')
    // console.log($(this).data('type'))


    type = $(this).data('type')
    page = 1
    // page_size = Infinity
    hasNextPage = true
    $('.has-next-page h1').html('数据加载中')

    $('.my-list').empty()
    getList({
      type,
      page,
      count
    })
  })


  let typeData = [
    {title: '最新', type: 'All'},
    {title: '妹纸', type: 'Girl'},
    {title: '推荐', type: 'All'},
  ]
  $.ajax({
    url: 'https://gank.io/api/v2/categories/Article',
    success({data}) {
      let newTypeData = [...typeData, ...data]
      newTypeData.forEach(({title, type}, index) => {
        $(`<li class="nav-item">
          <a data-type="${type}" class="nav-link ${index === 0 ? 'active' : ''}" href="#">${title}</a>
        </li>`).appendTo('.my-type ul')
      })

      /*data.forEach(({title}) => {
        $(`<li class="nav-item">
          <a class="nav-link" href="#">${title}</a>
        </li>`).appendTo('.my-type ul')
      })*/
    }
  })

})

